.index{ position: relative;overflow: hidden;}

body{overflow: hidden;background: #333;}

.banner{ position: absolute; left: 0;top: 0;bottom: 0;right: 0;}

.bannerUL{width: 100%;height: 100%;} 

.bannerUL li{ height: 100%;background-size: cover !important;}



.bannerPointer{ position: absolute; right: 40px; bottom: 30px;z-index: 5;}

.banner .swiper-pagination-bullet{width: auto; margin: 0 8px; font-size: 14px; text-align: center; height: auto;background: none;opacity: 1;font-family: arial;*display: inline;*zoom: 1;}

.banner .swiper-pagination-bullet span{ display: block;color: #666;}

.banner .swiper-pagination-bullet em{display: inline-block;margin: auto;width: 1px;height: 0px;background: #fff;transition: 0.5s;-webkit-transition: 0.5s;}

.banner .swiper-pagination-bullet-active em{ height: 40px;}

.banner .swiper-pagination-bullet-active span{ color: #fff;}



.indexName{ font-family: arial;font-size: 60px;font-weight: bold;color:#fff;}

.indexName em{color: #e21a22;}

.caseShow,.hezuopt,.youshi,.news,.contactUs{ position: absolute; left: 0;top: 0;bottom: 0;right: 0;}

.leftCase{ float: left;width: 33.333%;height: 100%;background-size: cover !important;position: relative;}

.leftCase .dobleU{ position: absolute; left: 10%;top:0;width: 50%;}

.caseName{ position: absolute;left: 26.5%;top: 7%;}

.manyCase{ position: absolute;left: 0;right: 0;bottom: 10%;background: #1a1a1a;}

.caseUL{ padding: 40px 0px 20px 100px;}

.caseUL li{margin-bottom: 20px; float: left;width: 33.33%;}

.caseUL li a{color:#fff;display: block;position:relative;text-align:center;width: 106px;line-height: 40px;background: url(../images/kuang_1.png) no-repeat left center;padding-left: 15px;}

.caseUL li a:before{ position: absolute;left: 0;top: 0;width: 0%;height: 100%;background: #e21a22;content: '';transition: 0.5s;-webkit-transition: 0.5s;}

.caseUL li a span{font-size: 13px; position: relative;z-index: 2;}

.caseUL li.on a:before,.caseUL li a:hover:before{ width: 113%;}

@media only screen and (max-width:1100px ) {
	.caseUL li a{padding-left: 0;}
}

.rightCase{ float: left;width: 66.666%;height: 100%;position: relative;background: #333}

.rightCase .caseDL{ height: 100%;width: 100%;}

.rightCase .caseDL li{width: 100%;background-size: cover !important;}

.rightCase .caseDL li .son{ float: left;width: 50%;height:33.333%;background-size: cover !important;position: relative;}

.rightCase .caseDL li .aH{ display: block; height: 100%;color: #fff;}

.rightCase .opcaitys{position: absolute;left: 0;bottom: 0;right: 0;height: 100%;background: #000;opacity: 0.7;-webkit-opacity: 0.7;filter:alpha(opacity=70);transition: 0.3s;-webkit-transition: 0.3s;}



@media only screen and (min-width:981px ) {

	.rightCase .son:nth-child(5) .caseCot{bottom: 0;}

	.rightCase .son:nth-child(6) .caseCot{bottom: 0;}

}

@media only screen and (max-width:980px ) {

.rightCase .caseDL li .son{height:16.66%;}

.rightCase .son:nth-child(11) .caseCot{bottom: 0;}

.rightCase .son:nth-child(12) .caseCot{bottom: 0;}

}

@media only screen and (max-width:768px ) {

	.rightCase .opcaitys{height: 30px;font-size: 14px;}

}

.rightCase .caseCot{display: none; position: absolute; left: 0;right: 0;bottom:-130px;background: #e21a22;animation: cot 0.4s both;-webkit-animation: cot 0.4s both;}



@media only screen and (max-width:768px ) {

	.rightCase .caseCot{bottom:0}

}

.rightCase .caseCot h5{line-height:30px;height: 30px;overflow: hidden;font-size: 20px;padding: 20px 0 0px 35px;border-bottom: 1px solid rgba(0,0,0,0.3);}

.rightCase .caseCot h5 span{ display:block;position: relative;}

.rightCase .caseCot h5 span:before{position: absolute;left: 0;bottom: 0;width: 40px;height: 1px;background: #fff;content: '';}

@media only screen and (max-width:768px ) {

	.rightCase .caseCot h5 span:before{display: none;}

}

.rightCase .caseCot .txt{ padding: 15px 35px;font-size: 14px;opacity: 0.7;}

.rightCase .caseDL li .son:hover{z-index: 2;}

.rightCase .caseDL li .son:hover .caseCot{ display: block;}

@media only screen and (min-width:769px ) {

	.rightCase .caseDL li .son:hover .opcaitys{opacity: 0;}

	.rightCase .caseDL li .son:hover .opcaitys{-webkit-opacity: 0;filter:alpha(opacity=0);}

}

.rightCase .caseDL li .son:nth-last-child(1) .caseCot,.rightCase .caseDL li .son:nth-last-child(2) .caseCot{top: auto;bottom: 0;}

.hbbg_1{font-size: 14px;width:72%;color: #FFFFFF;}

.hbbg_1 .hbbg_2{margin-bottom:8%;margin-left: 2%;box-sizing: border-box;padding-left: 20px;}

@keyframes cot{

	from{transform: translate(0,-100px);-webkit-transform: translate(0,-100px);}

	to{transform: translate(0,0px);-webkit-transform: translate(0,0px);}

}

@-webkit-keyframes cot{

	from{transform: translate(0,-100px);-webkit-transform: translate(0,-100px);}

	to{transform: translate(0,0px);-webkit-transform: translate(0,0px);}

}



.hezuopt{background-size: cover !important;}

.hezuopt .hbU{ position: absolute;left: 0;top: 0;width:16%;}

.ptName{ position: absolute; left: 12%; top: 25%;top: 2.5rem;}

.hezuoChange{z-index: 3; position: absolute;width: 800px;left: 50%;margin-left: -400px;top: 50%;margin-top: -282px;}

.hezuoDL dd{ width: 100%;height: 100%;display: none;animation: xz 1s both;-webkit-animation: xz 1s both;}

@keyframes xz{

	from{transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}

	to{transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}

}

@-webkit-keyframes xz{

	from{transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}

	to{transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}

}

.hezuoDL dd.on{display: block; }

.hezuoDL dd>p{ float: left;width: 16.666%;padding-top:16.666%;position: relative;}

.hezuoDL dd>p a{ position: absolute; left: 1px;top: 1px;right: 0;bottom:0;background-size: cover !important;}

/*.hezuoDL dd>p a:before{ position: absolute; left: 3px;top: 3px;right:3px;bottom:3px;border: 5px solid #fff;content: '';opacity: 0.6;transition: 0.3s;-webkit-transition: 0.3s;}

.hezuoDL dd>p a:hover:before{border-color:#e21a22}*/

.hezuoDL dd>p:nth-child(1){ margin:0 33.332% 0 49.998%;}

.hezuoDL dd>p:nth-child(6){ margin:0 16.666% 0 0%;}

.hezuoDL dd>p:nth-child(7){ margin:0 0 0 16.666%;}

.hezuoDL dd>p:nth-child(12){ margin:0 0 0 33.332%;}

.hezuoChange .hbbg{ position: absolute; left: 50%;bottom: 0;}

.pu_1{ position: absolute;right: 0;top:24.5%;z-index: 2;width: 10%;}

.pu_2{ position: absolute;right: 5%;bottom:10px;z-index: 2;width: 16%;}

.moreLk{top: 100%;left: 49.998%; position: absolute;width: 16.666%;padding-top: 16.666%;background:#e21a22 url(../images/plus_1.png) no-repeat center;}

.hezuoPointer{ position: absolute; left: 40px;bottom: 40px;right: 40px;}

.hezuoPointer .pointUL li{display: inline-block; padding:5px;margin-right: 20px;cursor: pointer;}

.hezuoPointer .pointUL li span{display: inline-block;width: 6px;height: 6px;background: #fff;border-radius: 50%;}

.hezuoPointer .pointUL li.on span{background: #E21A22;}

.hezuoPointer .pointUL{ display: inline-block;}

.pointLine{display: inline-block; width: 40%;position: relative;height: 1px;background: #373737;}

.redLine{height: 1px; position: absolute;left: 0;top:0;width: 10%;background: #e21a22;}

.redLine img{ position: absolute;right: 0;bottom: 0;}

.finishs{ position: absolute;right: 0;top: 0;}

.redLine.on{animation:line2s 4s linear infinite;-webkit-animation:line2s 4s linear infinite;}

@keyframes line2s{

	from{width: 0;}

	to{width: 100%;}

}

@-webkit-keyframes line2s{

	from{width: 0;}

	to{width: 100%;}

}







.youshiQh{ width: 100%;height: 100%;position:absolute;top: 0;left:0;z-index: 2;padding-top:10%;box-sizing: border-box;}

.youshiDL{ height: 100%;}

.youshiDL dd{ height: 100%;background-size: cover !important;display: none;animation:youshi2 0.6s both; position:absolute;width:80%;top: 50%;left: 10%;margin-top: -200px;height: 400px;}

@keyframes youshi{

	from{transform:translate(-200px,0);opacity: 0;-webkit-transform:translate(-200px,0);}

	to{transform:translate(0px,0);opacity: 1;-webkit-transform:translate(0px,0);}

}

.youshiDL dd.on1{display: block;}

.youshiRatote{width: 50%;position: relative; float: right;height: 100%;background: url(../images/ysrbg_1.jpg) no-repeat center;background-size: cover;}

.youshiDL dd .topImg{ padding-left: 10%;width: 340px;height: 340px;animation: 1s youshi both;-webkit-animation: 1s youshi both;float: left;margin-top: 30px;}

.youshiDL dd .topImg img{width: 100%;height: 100%;}

.youshiDL dd .h3{padding-bottom: 25px; margin-top: 10%; font-size: 36px;color: #fff;line-height: 1.2;animation: 1s 0.1s youshi both;-webkit-animation: 1s 0.3s youshi both;position: relative;}

.youshiDL dd .h3:before{ position: absolute; left: 10%;bottom: -1px;height: 1px;width: 60px;content: '';}

.youshiDL dd .txt{ padding:0 20% 0 0;color: #b2b2b2;font-size: 15px;animation: 1s 0.6s youshi both;-webkit-animation: 1s 0.2s youshi both;}

.poBtoom{float: right;width: 50%;border-left: 1px #ffffff solid;height:100%;padding-left: 68px;box-sizing: border-box}

.dot-red{fill:#e21a22;opacity: 0;}

@media only screen and (max-width:1200px) {

	.youshiDL dd{height:250px;margin-top: -125px;}

	.youshiDL dd .topImg{width: 240px;height: 240px;margin-top:5px;}

	.youshiDL dd h2{margin-top: 0 !important;}

	.youshiDL dd .txt{padding: 0}

}

@media only screen and (max-width:960px) {

	.youshiDL dd .topImg{padding-left: 0;}

}

@media only screen and (max-width: 740px) {

	.poBtoom{padding-left: 0;}

}

@media only screen and (max-width:640px ){

	.youshiDL dd{height:auto;margin-top:20%;top:0;}

	

	

}

@keyframes strokewt{

	0%{stroke-width:0px;}

	50%{stroke-width:10px;}

	100%{stroke-width:0px;}

}

@-webkit-keyframes strokewt{

	0%{stroke-width:0px;}

	50%{stroke-width:10px;}

	100%{stroke-width:0px;}

}

.dot-red.active{fill: #e21a22;opacity: 1;}

.st1{fill:rgba(0,0,0,0);}

.st2{opacity:0.3;fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}

.st3{display:none;}

.circle-red{fill:none;stroke:#ED1D24;stroke-width:3;stroke-miterlimit:10;transform: translate3d(0,0,0)}

.st5{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}

.st6{fill:#FFFFFF;/*stroke-width:10px;stroke:#FFFFFF; stroke-opacity:.5;animation: strokewt 1s infinite both;*/}

.st7{fill:transparent;cursor: pointer;}

.is-mobile .st2 {opacity: .35;}

.circle-red{stroke-dashoffset:1920px; stroke-width:6; stroke-dasharray:2400px;transition: 1s;-webkit-transition: 1s;}

.svgNum{ position: absolute;left: 26%;bottom: 26%;right: 26%;top: 26%;}

.svgNum dd{border-radius: 50%;transform: rotateY(180deg);background: #e21a22;position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;color: #1A1A1A;font-size: 50px;font-family: arial;display:none;animation: noneq 1s both;-webkit-animation: noneq 1s both;}

.svgNum dd.on{display: block;transform: rotateY(0deg);}

.svgNum dd span{animation: 1s nonew both;}

@keyframes noneq{

	from{transform:rotateY(180deg);}

	to{-webkit-transform:rotate(0deg);}

}

@keyframes nonew{

	0%{opacity: 0;}

	100%{opacity: 1;}

}

.svgNum dd span{font-weight: bold; position: absolute;left: 0;width: 100%;text-align: center;line-height:50px;height: 50px;top: 50%;margin-top: -25px;}

.youshiRatote .svgg{ position: absolute;width: 50%;height: 0;padding-top: 50%;left: 25%;top: 15%;}

.youshiRatote svg{ position: absolute; width: 100%;height: 100%;left: 0;top: 0;}

.youshiImg{ position: absolute;left:  10%;top: 48%;z-index: 3;top: 0.425rem;}

.youshiImg2{ position: absolute;left: 1%;top: 48%;z-index: 3;top:1.1rem;}

@media only screen and (max-width:1100px ) and (min-width:739px ){

	.youshiImg2

		{

			display: none;	

		}

	}

@media only screen and (max-width:441px )

{

	.contactDL{

		top:8.6rem;

	}

}

@media only screen and (max-width:700px )

{

	.fooer_zt{

		width: 100%;

		float: none !important;

		font-size: 12px !important;

	}

	.footer_bq{

		width: 100%;

		float: none !important;

		font-size: 12px !important;

	}

}

.svgPage { position: absolute; left: 0;width: 100%;text-align: center;bottom:5%;}

.svgPage a{display: inline-block;position: relative;top: -5px;padding: 10px 0;}

.svgPage span{display: inline-block;color: #808080;font-size: 24px;font-family: arial;line-height: 20px;height: 20px;}

.svgPage span.on{color: #fff;font-size: 50px;}

.svgPage .prevS{ margin-right: 35px;}

.svgPage .nextS{margin-left: 35px;}

.news{ background: url(../images/xwbj.jpg) no-repeat center;background-size: cover !important;}

.paddingNews{position: absolute; left: 7%;right: 7%;bottom: 15%;top: 15%;}

.newsOpacity{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../images/rep_1.png) repeat;}

.newsDL{position:absolute;z-index: 2;top: 50%;margin-top: -200px;width: 100%;}

.newsDL dd{ float: left;width:33.33%;padding: 0 2.5%;box-sizing: border-box;}

.newsDL dd .img {border: 8px solid #808080;transition: 0.4s;-webkit-transition: 0.4s;}

.newsDL dd .img img{ width: 100%;}

.newsDL dd .pimgbg{ background-size: cover !important;height: 240px; }

.newsDL dd .txt{ background: #fff; position: relative;left: -19px;top: -30px; padding: 30px 20px 30px 40px;transition: 0.5s;-webkit-transition: 0.5s;}

.newsDL dd .txt:before{position: absolute;left: 10px;top: 10px;width: 22px;height: 22px;content: '';}

.newsDL dd .txt h5{color: #1a1a1a; margin-bottom:3px;font-size: 18px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

.newsDL dd .txt p{color: #808080;height: 42px;overflow: hidden;font-size: 14px;}

.newsDL dd .txt .imgyy{ position: absolute;left: 100%;top: 0;transition: 0.2s;-webkit-transition: 0.2s;}

.newsName{ position: absolute;left: 3%;top: 12%;z-index: 3;}

.newsMore{left: -20px; bottom: -20px;z-index: 3; position: absolute;width: 40px; height: 40px;background:#e21a22 url(../images/more_1.png) no-repeat center;}

.newsMore:hover{background-color: #333;transform: rotate(165deg);}

.ucanImg{ position: absolute; left: 0;width: 100%;bottom: 40px;}

.newsU{ position: absolute; right: 0.7rem;bottom: 0;width: 2.3rem;}

.index.on .newsU{animation: index_2_2 1s 1.2s both;-webkit-animation: index_2_2 1s 1.2s both;}

/*动画time*/



.index.on .manyCase{animation: index_2_1 1s 0.8s both;-webkit-animation: index_2_1 1s 0.8s both;}

.index.on .rightCase .caseDL li .son{animation:index_2_2 1s 0.4s both;-webkit-animation:index_2_2 1s 0.4s both;}

.index.on .rightCase .caseDL li .son:nth-child(2){animation:index_2_2 1s 0.6s both;-webkit-animation:index_2_2 1s 0.6s both;}

.index.on .rightCase .caseDL li .son:nth-child(3){animation:index_2_2 1s 0.8s both;-webkit-animation:index_2_2 1s 0.8s both;}

.index.on .rightCase .caseDL li .son:nth-child(4){animation:index_2_2 1s 1.0s both;-webkit-animation:index_2_2 1s 1.0s both;}

.index.on .rightCase .caseDL li .son:nth-child(5){animation:index_2_2 1s 1.2s both;-webkit-animation:index_2_2 1s 1.2s both;}

.index.on .rightCase .caseDL li .son:nth-child(6){animation:index_2_2 1s 1.4s both;-webkit-animation:index_2_2 1s 1.4s both;}

.index.on .rightCase .caseDL li .son:nth-child(7){animation:index_2_2 1s 1.6s both;-webkit-animation:index_2_2 1s 1.6s both;}

.index.on .rightCase .caseDL li .son:nth-child(8){animation:index_2_2 1s 1.8s both;-webkit-animation:index_2_2 1s 1.8s both;}

.index.on .rightCase .caseDL li .son:nth-child(9){animation:index_2_2 1s 2s both;-webkit-animation:index_2_2 1s 2s both;}

.index.on .rightCase .caseDL li .son:nth-child(10){animation:index_2_2 1s 2.2s both;-webkit-animation:index_2_2 1s 2.2s both;}

.index.on .rightCase .caseDL li .son:nth-child(11){animation:index_2_2 1s 2.4s both;-webkit-animation:index_2_2 1s 2.4s both;}

.index.on .rightCase .caseDL li .son:nth-child(12){animation:index_2_2 1s 2.6s both;-webkit-animation:index_2_2 1s 2.6s both;}

.index.on .leftCase .dobleU{animation:index_3_3 1s 0.5s both;}

.index.on .caseName{animation:index_3_4 1s 1s both;transform-origin: left;}

@keyframes index_2{

	from{transform: translate(-500px,0);opacity: 0;-webkit-transform: translate(-500px,0);}

	to{transform: translate(0px,0);opacity: 1;transform: translate(0px,0);}

}

@keyframes index_2_1{

	from{transform: translate(0px,500px);opacity: 0;-webkit-transform: translate(0px,500px);}

	to{transform: translate(0px,0);opacity: 1;-webkit-transform: translate(0px,0px);}

}

@keyframes index_2_2{

	from{transform: translate(0,200px);-webkit-transform: translate(0,200px);opacity: 0;}

	to{transform: translate(0,0px);-webkit-transform: translate(0,0px);opacity: 1;}

}

@-webkit-keyframes index_2{

	from{transform: translate(-500px,0);opacity: 0;-webkit-transform: translate(-500px,0);}

	to{transform: translate(0px,0);opacity: 1;transform: translate(0px,0);}

}

@-webkit-keyframes index_2_1{

	from{transform: translate(0px,500px);opacity: 0;-webkit-transform: translate(0px,500px);}

	to{transform: translate(0px,0);opacity: 1;-webkit-transform: translate(0px,0px);}

}

@-webkit-keyframes index_2_2{

	from{transform: translate(0,200px);-webkit-transform: translate(0,200px);opacity: 0;}

	to{transform: translate(0,0px);-webkit-transform: translate(0,0px);opacity: 1;}

}



.index.on .hezuoDL{animation:index_3 1.6s 1s both;-webkit-animation:index_3 1.6s 1s both;}

.index.on .hezuoChange .hbbg img{animation:index_3_1 1.6s 1.5s both;-webkit-animation:index_3_1 1.6s 1.5s both;}

.index.on .pu_2{animation:index_3_2 1s 1.5s both;-webkit-animation:index_3_2 1s 1.5s both;}

.index.on .pu_1{animation:index_3_2 1s 1.5s both;-webkit-animation:index_3_2 1s 1.5s both;}

.index.on .hezuopt .hbU{animation:index_3_3 1s 0.5s both;-webkit-animation:index_3_3 1s 0.5s both;}

.index.on .ptName{animation:index_3_4 1s 1s both;transform-origin: left;-webkit-transform-origin: left;-webkit-animation:index_3_4 1s 1s both;}

.index.on .moreLk{animation:index_3_5 1s 2s both;-webkit-animation:index_3_5 1s 2s both;}

@keyframes index_3{

	from{transform: translate(-500px,0);opacity: 0;-webkit-transform: translate(-500px,0);}

	to{transform: translate(0px,0);opacity: 1;-webkit-transform: translate(0px,0);}

}

@keyframes index_3_1{

	from{transform: translate(500px,0);opacity: 0;-webkit-transform: translate(500px,0);}

	to{transform: translate(0px,0);opacity: 1;-webkit-transform: translate(0px,0);}

}

@keyframes index_3_2{

	from{transform: scale(0);-webkit-transform: scale(0);}

	to{transform: scale(1);-webkit-transform: scale(1);}

}

@keyframes index_3_3{

	from{transform:translate(0px,-500px);-webkit-transform:translate(0px,-500px);}

	to{transform:translate(0px,0);-webkit-transform:translate(0px,0);}

}

@keyframes index_3_4{

	from{transform:scale(0);-webkit-transform:scale(0);}

	to{transform:scale(1);-webkit-transform:scale(1);}

}

@keyframes index_3_5{

	from{transform:translate(0,200px);opacity: 0;-webkit-transform:translate(0,200px);}

	to{transform:translate(0,0px);opacity: 1;-webkit-transform:translate(0,0px);}

}

@-webkit-keyframes index_3{

	from{transform: translate(-500px,0);opacity: 0;-webkit-transform: translate(-500px,0);}

	to{transform: translate(0px,0);opacity: 1;-webkit-transform: translate(0px,0);}

}

@-webkit-keyframes index_3_1{

	from{transform: translate(500px,0);opacity: 0;-webkit-transform: translate(500px,0);}

	to{transform: translate(0px,0);opacity: 1;-webkit-transform: translate(0px,0);}

}

@-webkit-keyframes index_3_2{

	from{transform: scale(0);-webkit-transform: scale(0);}

	to{transform: scale(1);-webkit-transform: scale(1);}

}

@-webkit-keyframes index_3_3{

	from{transform:translate(0px,-500px);-webkit-transform:translate(0px,-500px);}

	to{transform:translate(0px,0);-webkit-transform:translate(0px,0);}

}

@-webkit-keyframes index_3_4{

	from{transform:scale(0);-webkit-transform:scale(0);}

	to{transform:scale(1);-webkit-transform:scale(1);}

}

@-webkit-keyframes index_3_5{

	from{transform:translate(0,200px);opacity: 0;-webkit-transform:translate(0,200px);}

	to{transform:translate(0,0px);opacity: 1;-webkit-transform:translate(0,0px);}

}

.index.on .youshiQh{animation:index_4 1.5s 0.1s both;-webkit-animation:index_4 1.5s 0.1s both;}

.index.on .youshiRatote{animation:index_4_2 1.5s 0.1s both;-webkit-animation:index_4_2 1.5s 0.1s both;}

.index.on .youshiImg{animation:index_3_4 1s 1s both;transform-origin: left;-webkit-transform-origin: left;-webkit-animation:index_3_4 1s 1s both;}

.index.on .st5{animation:index_4_3 2.5s 1.8s both;stroke-dasharray: 2400px;-webkit-animation:index_4_3 2.5s 1.8s both;}

.index.on .circle-red{animation:index_4_4 1s 3.5s both ;-webkit-animation:index_4_4 1s 3.5s both ;}

.index.on .dot-red{animation:index_4_5 0.1s 3.5s both ;-webkit-animation:index_4_5 0.1s 3.5s both ;}

.index.on .st6_1{animation:index_4_5 0.1s 1.8s both ;-webkit-animation:index_4_5 0.1s 1.8s both ;}

.index.on .st6_2{animation:index_4_5 0.1s 2.1s both ;-webkit-animation:index_4_5 0.1s 2.1s both ;}

.index.on .st6_3{animation:index_4_5 0.1s 2.4s both ;-webkit-animation:index_4_5 0.1s 2.4s both ;}

.index.on .st6_4{animation:index_4_5 0.1s 2.7s both ;-webkit-animation:index_4_5 0.1s 2.7s both ;}

.index.on .st6_5{animation:index_4_5 0.1s 3s both ;-webkit-animation:index_4_5 0.1s 3s both ;}

.index.on .svgNum{animation:index_4_6 1.5s 3.3s both ;-webkit-animation:index_4_6 1.5s 3.3s both ;}



@keyframes index_4{

	from{transform:translate(0,-800px);opacity: 0;-webkit-transform:translate(0,-800px);}

	to{transform:translate(0,0px);opacity: 1;-webkit-transform:translate(0,0px);}

}

@keyframes index_4_2{

	from{transform:translate(0,800px);opacity: 0;-webkit-transform:translate(0,800px);}

	to{transform:translate(0,0px);opacity: 1;-webkit-transform:translate(0,0px);}

}

@keyframes index_4_3{

	from{stroke-dashoffset:2400px;}

	to{stroke-dashoffset:0px;}

}

@keyframes index_4_4{

	from{opacity: 0;}

	to{opacity: 1;}

}

@keyframes index_4_5{

	from{r: 0px;}

	to{r:10px}

}

@keyframes index_4_6{

	from{transform: scale(3); opacity: 0;-webkit-transform: scale(3);}

	to{transform: scale(1);opacity: 1;-webkit-transform: scale(1);}

}

@-webkit-keyframes index_4{

	from{transform:translate(0,-800px);opacity: 0;-webkit-transform:translate(0,-800px);}

	to{transform:translate(0,0px);opacity: 1;-webkit-transform:translate(0,0px);}

}

@-webkit-keyframes index_4_2{

	from{transform:translate(0,800px);opacity: 0;-webkit-transform:translate(0,800px);}

	to{transform:translate(0,0px);opacity: 1;-webkit-transform:translate(0,0px);}

}

@-webkit-keyframes index_4_3{

	from{stroke-dashoffset:2400px;}

	to{stroke-dashoffset:0px;}

}

@-webkit-keyframes index_4_4{

	from{opacity: 0;}

	to{opacity: 1;}

}

@-webkit-keyframes index_4_5{

	from{r: 0px;}

	to{r:10px}

}

@-webkit-keyframes index_4_6{

	from{transform: scale(3); opacity: 0;-webkit-transform: scale(3);}

	to{transform: scale(1);opacity: 1;-webkit-transform: scale(1);}

}



.index.on .newsName{animation:index_3_4 1s 0.5s both;transform-origin: left;-webkit-transform-origin: left;-webkit-animation:index_3_4 1s 0.5s both;}

.index.on .newsOpacity{animation:index_5 1s 0.5s both;-webkit-animation:index_5 1s 0.5s both;}

.index.on .newsDL dd .img{animation:index_5_2 1s 1s both;-webkit-animation:index_5_2 1s 1s both;}

.index.on .newsDL dd .txt{animation:index_5_3 1s 1s both;-webkit-animation:index_5_3 1s 1s both;}



@keyframes index_5{

	from{width: 0;}

	to{width: 100%;}

}

@keyframes index_5_2{

	from{transform: rotate(-20deg);opacity: 0;-webkit-transform: rotate(-20deg);}

	to{transform: rotate(0deg);opacity: 1;-webkit-transform: rotate(0deg);}

}

@keyframes index_5_3{

	from{transform: rotate(30deg) translate(100px,0);opacity: 0;-webkit-transform: rotate(30deg) translate(100px,0);}

	to{transform: rotate(0deg) translate(0px,0);opacity: 1;-webkit-transform: rotate(0deg) translate(0px,0);}

}

@keyframes index_5_4{

	from{opacity: 0;}

	to{opacity: 1;}

}

@-webkit-keyframes index_5{

	from{width: 0;}

	to{width: 100%;}

}

@-webkit-keyframes index_5_2{

	from{transform: rotate(-20deg);opacity: 0;-webkit-transform: rotate(-20deg);}

	to{transform: rotate(0deg);opacity: 1;-webkit-transform: rotate(0deg);}

}

@-webkit-keyframes index_5_3{

	from{transform: rotate(30deg) translate(100px,0);opacity: 0;-webkit-transform: rotate(30deg) translate(100px,0);}

	to{transform: rotate(0deg) translate(0px,0);opacity: 1;-webkit-transform: rotate(0deg) translate(0px,0);}

}

@-webkit-keyframes index_5_4{

	from{opacity: 0;}

	to{opacity: 1;}

}

.index.on .contactDL dd:nth-child(1) .ctNum{animation:index_6 1s 0.5s both ;-webkit-animation:index_6 1s 0.5s both ;}

.index.on .contactDL dd:nth-child(2) .ctNum{animation:index_6 1s 0.8s both ;-webkit-animation:index_6 1s 0.8s both ;}

.index.on .contactDL dd:nth-child(3) .ctNum{animation:index_6 1s 1.1s both ;-webkit-animation:index_6 1s 1.1s both ;}

.index.on .contactDL dd:nth-child(4) .ctNum{animation:index_6 1s 1.4s both ;-webkit-animation:index_6 1s 1.4s both ;}

@keyframes index_6{

	from{transform: translate(0,200px);opacity: 0;-webkit-transform: translate(0,200px);}

	to{transform: translate(0,0px);opacity: 1;-webkit-transform: translate(0,0px);}

}

@-webkit-keyframes index_6{

	from{transform: translate(0,200px);opacity: 0;-webkit-transform: translate(0,200px);}

	to{transform: translate(0,0px);opacity: 1;-webkit-transform: translate(0,0px);}

}

.contactName,.newsName,.ptName.caseName{height: 0.9rem;}



.caseName{height: 3.9rem;}

.bannerTxt .txt_1 img{ height: 0.56rem;}

.bannerTxt .txt_2 img{ height: 0.17rem;}



	.fooer_zt{font-size: 14px;color: #FFFFFF;float: left;}

	.fooer_zt a{color: #FFFFFF;margin-left: 10px;font-size: 14px;}

	.footer_bq{float: right;font-size: 14px;color: #FFFFFF;}

	.hbbg_3 li{margin-bottom: 10px;}

	.hbbg_3 li a{color:#FFFFFF;display: none;}

	.hbbg_3 li:hover{background: #FFFFFF;}

	.hbbg_3 li:hover a{color: red;}

	.hbbg_3{z-index: 99;}

	.hbbg_3{position: absolute;left: 112% !important;width: 11%;top: 38%;font-size: 18px;line-height:38px;right: 0%;}

	.hbbg_3 a{padding-left: 7%;border-left: 1px solid #FFFFFF;}

@media only screen and (max-width:1400px ) {

	.caseUL{ padding: 40px 0px 20px 20px;}

	.hezuoChange{ width:70%;left:70%;margin-left:-35%;margin-top: -20%;left: 50%;top: 50%;}

	.index.on .hezuoChange .hbbg{display: none !important;width: 0;height: 0;overflow: hidden;}

	.paddingNews{left: 4%;right: 4%;top: 10%;bottom: 10%;}

	.contactDL{ margin-top: 0;}

	.youshiDL dd .h3{ font-size: 24px;}

	.bannerTxt .txt_1 img{ height: 0.62rem;}

	.bannerTxt .txt_2 img{ height: 0.20rem;}

	.topLine,.bottomLine{ height: 120px;}

	.topLine{ top: 110px;}

	.bottomLine{ bottom: 110px;}

	.bannerTxt{ top: 55%;}

	.leftCase .dobleU{ width: 2rem;}

	.caseName{ top: 1rem;left: 1.8rem;}

	/*.contactName,.newsName,.youshiImg,.ptName{height: 0.7rem;}*/

	.caseName{height: 2.7rem;}

	.svgNum dd span{ font-size: 0.5rem;}

	.bottomContact{ padding: 0.4rem 0;}

	.bottomContact .inputD{ padding: 10px 0;}

	.newsDL dd .pimgbg{ height: 200px;}

}

@media only screen and (max-width:640px ) {

	.fooer_zt{display: none;}

}

@media only screen and (max-width:1100px ) {

	

	.leftCase{ float: none;width: 140px;height: 100%;position: absolute;left: 0;top: 0;}

	.rightCase{height: auto; float: none;width: auto;position: absolute;left: 140px;bottom: 0;right: 0;top: 0px;}

	.manyCase{ bottom: 0;}

	.caseUL li{ float: none;display: inline-block;width: auto;}

	.leftCase .dobleU{ display: none;}

	.caseName{height:136px;}

	.caseUL{ padding: 20px;}

	.caseUL li{ margin-bottom: 10px;}

	.contactName, .newsName, .youshiImg, .ptName{display: block;margin: auto;position: static;padding: 15px 0;}

	.caseName{display: block;margin: auto;position: static;padding: 50px 0;}

	.poBtoom{border: 0px;padding-left: 0;}

}

.hbbg_2 span{display: none;}

.on{display:block;}

.hbbg_2 .on{display:block;}



@media only screen and (max-width:740px ) {

	.poBtoom{float: none;margin: 0px auto;}

	.youshiImg2{display: none;}

	.contactName, .newsName, .youshiImg, .ptName { height: 30px;}

	.caseName{ height:95px;}

	.caseUL li a{ font-size: 13px;width: 90px;line-height: 36px;background-size: contain;}

	.bannerTxt .txt_1 img{ width: 70%;height: auto;}

	.bannerTxt .txt_2 img{ height: auto;width: 90%;}

	.bottomLine,.topLine{width: 60px;margin-left: -30px;}

	.bottomLine{ bottom: 70px;}

	.topLine{ top: 70px;}

	.bannerTxt .txt_1{ margin-bottom: 10px;}

	.hezuopt .hbU{ display: none;}

	.hezuoChange{ width: 94.8%;left: 2.2%;margin-top: -45%;margin-left: 0px;}

	.youshiQh{ float: none;width: 100%;height:100%;position: relative;padding-top:80px;box-sizing: border-box;top:0;left: 0;}

	.youshiRatote{ float: none;width: 100%;height: 50%;}

	.index .youshiImg{position: absolute; left: 2%;top:2%;}

	.youshiDL dd .topImg{ width: 50%;margin: 0px auto;padding: 0;position: relative !important;float: none; }

	.youshiDL dd .h3{ padding-left: 2%;font-size: 18px;}

	.youshiDL dd .txt{ padding: 2% 2%;}

	.youshiDL dd .topImg img{overflow: hidden;}

	.poBtoom{ bottom: 2%;width: 80%;}

	.svgPage{ bottom: 10px;}

	.svgPage span{ font-size: 18px;}

	.svgPage span.on{ font-size: 24px;}

	.newsDL{margin-top: -210px;}

	.newsDL dd{ float: none; width: auto;height:100px;margin:5% 0;position: relative;padding-left: 120px;}

	.newsDL dd .img{border: none; position: absolute; left: 0;top: 0;width: 105px;height: 100%;}

	.newsDL dd .txt:before{left: auto;right: 10px;top:auto;bottom: 10px;}

	.newsDL dd .txt{left: 0;top: 0;padding: 15px;padding-bottom: 48px;position: absolute;left: 105px;top: 0;bottom: 0;right: 0;}

	.newsMore{ width: 76px;height: 76px;}

	.newsDL dd .pimgbg{ height: 100%;}

	

	.svgNum dd span{ font-size: 20px;}

	.newsDL dd .pimgbg{}

	.newsDL dd .txt p{}

	.paddingNews{ bottom: 3%;}

	/*body{overflow: scroll;}*/

	.youshiDL dd .h3{ padding-bottom: 0;font-size: 17px;}

	.youshiDL dd .txt{ font-size: 13px;}

	.rightCase .caseCot{ display: none !important;}

	.contactName{position: relative;z-index: 3;}

	

}

.ca2{

	display: none;

}

@media only screen and (max-width:640px ){

.youshiDL dd .topImg{ width: 70%;height: auto;}

.poBtoom{width:100% !important;}

}



@media only screen and (max-width:768px ){

	.rightCase .caseCot .txt{

		display: none;

		opacity: 0.8 !important;

		max-height: 90px;

		overflow: hidden;

		margin-bottom: 20px;

	}

	.rightCase .caseDL li  .caseCot{

		display:block !important;

		background:transparent !important;

	}

	.rightCase .caseCot h5{

		border:0;

		font-size: 14px;

		padding:0 10px;

	}

}

@media only screen and (min-width:769px ){

	.rightCase .caseDL li .son:hover{z-index: 2;}

	.rightCase .caseDL li .son:hover .caseCot{ display: block;}

	.rightCase .caseDL li .son:hover .opcaitys{opacity: 0;-webkit-opacity: 0;filter:alpha(opacity=0);}

}

@media only screen and (max-width:480px ) {

	.contactName, .newsName, .youshiImg, .ptName .caseName{ height: 23px;}

	.caseName{ height: 65px;z-index: 99 !important;}

	.caseUL{ padding: 10px;}

	.caseUL li a{ width: 100%;white-space: nowrap;}

	.leftCase{ width: 118px;background: #1A1A1A !important;}

	.rightCase{ left: 118px;}

	.youshiDL dd .h3{ font-size: 17px;padding-bottom: 8px;}

	.manyCase{bottom:0; display: flex;align-items: center;}

	.youshiDL dd .txt{ font-size: 0.6rem;}

	.rightCase .caseDL li .son{ height:16.667%;width: 100%;float: none;}

	.poBtoom{ top:41%;}

	.ca1{display: none;}

	.ca2{display: block;height: 36px;}

	.navCaidan{position: fixed;right: 0;left:initial;}

	.navCaidanItem{position: fixed;right: -250px;left: initial;text-align: right;}

	.navCaidanItemUL {right: initial;left: 0;}

	.poBtoom{width: 80%;text-align: center;}

	.caseUL li a span { font-size: 13px;position: relative;z-index: 2;padding-left: 2%;}

	body .newsDL dd:hover .txt{

		left:105px !important;

		background: #fff !important;

	}

	.newsDL dd:hover .txt h5{

		color:#000 !important;

	}

	.newsDL dd:hover .txt p{

		color:#808080 !important;

	}

	.newsDL dd:hover .txt .imgyy{

		opacity: 1 !important;

	}

	body .newsDL dd .txt{

		color:#000;

	}

	.rightCase .caseDL li .son:hover .opcaitys{

		opacity: 0.7 !important;

	}

	.rightCase .caseCot h5 span:before{

		display: none !important;

	}

	.rightCase .opcaitys{

		overflow: hidden;

	}

}

@media only screen  and (max-width:1280px)  and (min-width:1000px) {

	.hezuoChange {

	    width: 70%;margin-left: -35%;

	}

}

@media only screen and (max-width:1400px ){

	

}

@media only screen and (max-width:600px ){

	.rightCase .caseDL li .son{

		height:25%;

	}

}

@media only screen and (max-width:500px ){

	.rightCase .caseDL li .son{

		height:20%;

	}

}

@media only screen and (max-width:350px ){

	.contactDL dd .ctNum>div{

		margin-bottom: 15px;

	}

}

@media screen and (max-width: 1400px) and (min-width: 640px){

	#zpxs{

		display: block !important;

	}

}

#zpxs{

	display: none;

}

#zpxs li{

	float: left;

	width: 12%;

	text-align: center;

	margin-top: 30px;

}

#zpxs li a{

	font-size: 15px;

	color: #FFFFFF;

	border-top: 1px red solid;

	padding-top: 9%;

	padding-bottom: 9%;

	border-bottom: 1px red solid;

}

@media only screen and (max-width:1290px ){

	.logoUL li{

		margin-left: 27px !important;

	}

}



@media only screen and (min-width:769px ){

	.newsDL dd:hover .txt .imgyy{opacity: 0;}

	.newsDL dd:hover .txt{left: 0px;top: 0px;background: #e21a22;color: #fff;}

	.newsDL dd:hover .img{border-color: #E21A22;transform: rotate(-2deg);}

	.newsDL dd:hover .txt h5,.newsDL dd:hover .txt p{color: #fff;}



}

#synew{

	position: absolute;

}